<template>
  <div class="login-container">
    <van-nav-bar title="登录" class="page-nav-bar">
      <template #left>
        <van-icon name="cross" @click="$router.back()"/>
      </template>
    </van-nav-bar>
    <van-form @submit="onSubmit" ref="formRef">
      <van-field name="mobile" placeholder="请输入手机号" v-model="user.mobile" :rules="userFormRules.mobile" maxlength="11" type="number">
          <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field name="code" placeholder="请输入验证码" v-model="user.code"  :rules="userFormRules.code" maxlength="6" type="number">
          <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
          <template #button>
            <van-button v-if="!isCountDownShow" class="send-sms-btn" size="mini" round @click="sendSms" native-type="button">获取验证码</van-button>
            <van-count-down v-else :time="5*1000" format="ss s" @finish="isCountDownShow = false"/>
          </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, sendSms } from '@/api/user'
import { mapMutations } from 'vuex'
// 方式1,手动到入
// import { login } from '@/api/user.js'
export default {
  name: 'LoginPage',
  props: {},
  components: {},
  data () {
    return {
      user: {
        mobile: '18615710930',
        code: '246810'
      },
      userFormRules: {
        mobile: [{ required: true, message: '请填写手机号' }, { pattern: /1[3|5|7|8|9]\d{9}/, message: '请输入正确手机号' }],
        code: [{ required: true, message: '请填写验证码' }, { pattern: /\d{6}/, message: '请输入正确验证码' }]
      },
      isCountDownShow: false
    }
  },
  created () {

  },
  methods: {
    ...mapMutations(['setUser']),
    async sendSms () {
      // 1.验证手机号
      try {
        // 验证成功res是undefined
        const res = await this.$refs.formRef.validate('mobile')
        // 2.显示倒计时
        this.isCountDownShow = true
        // 3.发请求
        await sendSms(this.user.mobile)
        console.log(res)
      } catch (e) {
        // 请求不成功
        if (e.response) {
          if (e.response.status === 429) {
            this.$toast('发送太频繁,请等会')
          } else {
            this.$toast('发送失败')
          }
        } else {
          // 验证不成功
          console.log('验证失败', e)
        }
      }
    },
    async onSubmit () {
      // 方式2.复制方法名+alt+/
      try {
        this.$toast.loading({
          message: '登录中中...',
          forbidClick: true,
          duration: 0
        })
        // 方式1,es5
        // const res = await login(this.user)
        // this.setUser(res.data.data)
        // 方式2.es6
        // const { data: res } = await login(this.user)
        // this.setUser(res.data)
        // 方式3.es6多层解构
        const { data: { data } } = await login(this.user)
        this.setUser(data)
        this.$toast.success('登录成功')
      } catch (error) {
        // if(error)
        // console.log(error)
        console.dir(error)
        if (error.response.status === 400) {
          this.$toast.fail('手机号或者验证码错误')
        } else {
          console.log('请稍后重试', error)
          this.$toast.fail('请稍后重试')
        }
      }
      console.log('hello')
    }
  }
}
</script>

<style lang="less" scoped>
.toutiao {
  font-size: 37px;
}
.send-sms-btn{
  width: 152px;
  height: 46px;
  line-height: 46px;
  background-color: #ededed;
  font-size: 22px;
  color: #666;
}
.login-btn-wrap{
  padding: 53px 33px;
  .login-btn{
    background-color: #6db4fb;
    border: none;
  }
}
.van-nav-bar .van-icon{
  color: #fff;
}
</style>
